<template>
    <div class="bottomBar">
        <div class="bottomLeft">
            <input class="checkbox" type="checkbox" v-model="ischecked" >
            <span>全选</span>
        </div>
        <div class="bottomTottle">
            {{'￥'+totalPrice}}
        </div>
        <div class="settlement">
            结算({{selectCount}})
        </div>
    </div>
</template>

<script>
import {mapGetters, mapState} from 'vuex'
export default {
    
    computed: {
        ...mapState(['carList']),
        totalPrice(){
            console.log(this.carList);
            //toFixed保留两位小数
            return this.carList.filter(item=>
            {return item.checked}).reduce((pre,item)=>{
                return pre + item.price*item.count
            },0).toFixed(2)
        },
        selectCount(){
            return this.$store.state.carList.filter(item=>item.checked).length
        },
         ischecked:{
             get:function(){
                 if (this.$store.state.carList.length!=0) {
                    return this.$store.state.carList.every(item=>item.checked)
                }else return false
                 
             },
             set:function(){
                //  return 0
                if (this.ischecked) {
                    return this.$store.state.carList.forEach( item=>item.checked=false )
                }else{
                    return this.$store.state.carList.forEach( item=>item.checked=true )

           }
             }
                // if (this.$store.state.carList.length!=0) {
                //     return this.$store.state.carList.every(item=>item.checked)
                // }else return false
            },
        
        
        
    },
    methods: {
    //    ischeckall(){
    //        if (this.ischecked) {
    //             this.$store.state.carList.forEach( item=>item.checked=false )
    //        }else{
    //            this.$store.state.carList.forEach( item=>item.checked=true )

    //        }
    //     console.log(1);
    //    }
       
    }
   
};
</script>

<style lang="less" scoped>
.bottomBar{
    display: flex;
    height: 40px;
    // background-color: red;
    width: 100%;
    line-height: 40px;
    font-size: 20px;
    border: 1px solid #ccc;
    padding-left: 5px;
        .checkbox{
            height: 20px;
            width: 20px;
            vertical-align: middle;
        }
    
}
.bottomTottle{
    margin-left: 10px;
    font-size: 20px;
    flex: 1;
}
.settlement{
    width: 70px;
    background-color: red;
    color: #fff;
    text-align: center;
    // margin-right: auto;
}

</style>


